<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="icon" th:href="@{/img/apple.png}"/>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" crossorigin="anonymous">
	<link rel="stylesheet" th:href="@{/css/global.css}" />
	<title>用户管理</title>
</head>
<body>
	<div class="nk-container">
		<!-- 头部 -->
		<header class="bg-dark sticky-top" th:replace="index::header">
			<div class="container">
				<!-- 导航 -->
				<nav class="navbar navbar-expand-lg navbar-dark">
					<!-- logo -->
					<a class="navbar-brand" href="#"></a>
					<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
						<span class="navbar-toggler-icon"></span>
					</button>
					<!-- 功能 -->
					<div class="collapse navbar-collapse" id="navbarSupportedContent">
						<ul class="navbar-nav mr-auto">
							<li class="nav-item ml-3 btn-group-vertical">
								<a class="nav-link" href="../index.html">首页</a>
							</li>
							<li class="nav-item ml-3 btn-group-vertical">
								<a class="nav-link position-relative" href="letter.html">消息<span class="badge badge-danger">12</span></a>
							</li>
							<li class="nav-item ml-3 btn-group-vertical">
								<a class="nav-link" href="register.html">注册</a>
							</li>
							<li class="nav-item ml-3 btn-group-vertical">
								<a class="nav-link" href="login.html">登录</a>
							</li>
							<li class="nav-item ml-3 btn-group-vertical dropdown">
								<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
									<img src="http://images.nowcoder.com/head/1t.png" class="rounded-circle" style="width:30px;"/>
								</a>
								<div class="dropdown-menu" aria-labelledby="navbarDropdown">
									<a class="dropdown-item text-center" href="profile.html">个人主页</a>
									<a class="dropdown-item text-center" href="setting.html">账号设置</a>
									<a class="dropdown-item text-center" href="login.html">退出登录</a>
									<div class="dropdown-divider"></div>
									<span class="dropdown-item text-center text-secondary">nowcoder</span>
								</div>
							</li>
						</ul>
						<!-- 搜索 -->
						<form class="form-inline my-2 my-lg-0" action="search.html">
							<input class="form-control mr-sm-2" type="search" aria-label="Search" />
							<button class="btn btn-outline-light my-2 my-sm-0" type="submit">搜索</button>
						</form>
					</div>
				</nav>
			</div>
		</header>

		<!-- 内容 -->
		<div class="main">
			<div class="container">
				<form class="form-inline" action="" method="get" id="queryForm">
					<label for="username" class="mb-2 mr-sm-2">用户名：</label>
					<input type="text" class="form-control mb-2 mr-sm-2" th:value="${param.username}"
						   id="username" placeholder="" name="username">
					<label for="type" class="mb-2 mr-sm-2">身份：</label>
					<select class="form-control mb-2 mr-sm-2" th:value="${param.type}"
							id="type" name="type">
						<option value="-1">请选择</option>
						<option value="0">普通用户</option>
						<option value="1">管理员</option>
					</select>
					<label for="status" class="mb-2 mr-sm-2">状态：</label>
					<select class="form-control mb-2 mr-sm-2" th:value="${param.status}"
							id="status" name="status">
						<option value="-1">请选择</option>
						<option value="1">已激活</option>
						<option value="0">未激活</option>
						<option value="2">封号</option>
					</select>

					<button type="reset" class="btn btn-secondary mb-2 ">重置</button>&nbsp;&nbsp;&nbsp;
					<button type="button" id="query" onclick="queryUsers()" class="btn btn-primary mb-2 pull-right" >查询</button>
				</form>
				<table class="table table-bordered table-hover">
					<thead>
					<tr>
						<th>编号</th>
						<th>头像</th>
						<th>用户名</th>
						<th>手机号</th>
						<th>邮箱</th>
						<th>身份</th>
						<th>状态</th>
						<th>创建时间</th>
						<th>操作</th>
					</tr>
					</thead>
					<tbody>
					<tr th:each="user:${users}">
						<td th:text="${user.id}">01</td>
						<td>
							<img th:src="${user.headerUrl}" class="img-circle" th:onclick="showImg([[${user.headerUrl}]])"
								 data-toggle="modal" data-target="#myModal2">
						</td>
						<td th:text="${user.username}">用户名</td>
						<td th:text="${user.phone}">手机号</td>
						<td th:text="${user.email}">邮箱</td>
						<td th:text="${user.type==0?'普通用户':'管理员'}">1231</td>
						<td th:text="${user.status==1?'已激活':(user.status==0?'未激活':'封号')}">状态</td>
						<td th:text="${#dates.format(user.createTime,'yyyy-MM-dd HH:mm:ss')}">创建时间</td>
						<td>
							<button type="button" class="btn btn-light btn-xm" id="setUser"
									data-toggle="modal" data-target="#myModal" th:onclick="setUser([[${user.id}]])">
								<span class="glyphicon glyphicon-pencil"></span> 修改
							</button>
							<input type="hidden" th:value="${user.id}" th:id="|id${user.id}|">
							<input type="hidden" th:value="${user.status}" th:id="|status${user.id}|">
							<button type="button"
									th:if="${user.status!=0}"
									th:text="${user.status==1?'封号':'解封'}"
									th:class="|btn ${user.status==1?'btn-danger':'btn-default'} btn-xm|"
									id="btn" th:onclick="banuser([[${user.id}]])">
								<span class="glyphicon glyphicon-trash"></span> 封号
							</button>
						</td>
					</tr>
					</tbody>
				</table>

				<!-- 分页 -->
				<nav class="mt-5" th:replace="index::pagination">
					<ul class="pagination justify-content-center">
						<li class="page-item"><a class="page-link" href="#">首页</a></li>
						<li class="page-item disabled"><a class="page-link" href="#">上一页</a></li>
						<li class="page-item active"><a class="page-link" href="#">1</a></li>
						<li class="page-item"><a class="page-link" href="#">2</a></li>
						<li class="page-item"><a class="page-link" href="#">3</a></li>
						<li class="page-item"><a class="page-link" href="#">4</a></li>
						<li class="page-item"><a class="page-link" href="#">5</a></li>
						<li class="page-item"><a class="page-link" href="#">下一页</a></li>
						<li class="page-item"><a class="page-link" href="#">末页</a></li>
					</ul>
				</nav>

				<!--修改信息-->
				<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
					 aria-hidden="true">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<h4 class="modal-title" id="myModalLabel">
									修改信息
								</h4>
								<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
									&times;
								</button>
							</div>
							<div class="modal-body">

								<form class="form-horizontal" role="form" th:action="@{/setUser}" method="post">
									<input type="hidden" name="id" id="userId" >
									<div class="form-group">
										<label for="type" class="mb-2 mr-sm-2">身份:</label>
										<div class="form-check">
											<input class="form-check-input" type="radio"
												   name="type" id="exampleRadios2" value="0">
											<label class="form-check-label" for="exampleRadios2">
												普通用户
											</label>
										</div>
										<div class="form-check">
											<input class="form-check-input" type="radio"
												   name="type" id="exampleRadios1" value="1" checked>
											<label class="form-check-label" for="exampleRadios1">
												管理员
											</label>
										</div>
									</div>
									<div class="form-group">
										<label for="status" class="mb-2 mr-sm-2">状态:</label>
										<select class="form-control mb-2 " id="fixStatus" name="status">
											<option value="1">已激活</option>
											<option value="0">未激活</option>
										</select>
									</div>
									<div class="modal-footer">
										<button type="button" class="btn btn-default" data-dismiss="modal">关闭
										</button>
										<button type="submit" class="btn btn-primary">
											确认更改
										</button>
									</div>

								</form>
							</div>

						</div>
					</div>
				</div>

				<!--图片-->
				<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1"
					 aria-hidden="true">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<h5 class="modal-title" id="myModalLabel1">头像图片</h5>
								<button type="button" class="close" data-dismiss="modal"
										aria-hidden="true">&times;</button>
							</div>
							<div class="modal-body" style="height: 300px;text-align: center;">

								<img src="" style="height: 250px;" id="touimg" />

							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- 尾部 -->
	</div>


	<script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" crossorigin="anonymous"></script>
	<script th:src="@{/js/global.js}"></script>
	<script th:src="@{/js/userList.js}"></script>


</body>
</html>
